<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>地址三联动</title>
	</head>
	<style type="text/css">
		#add_Pose,#add_ciry,#add_region{
			width: 100px;
			height: 30px;
			font-size: 15px;
			font-family: 黑体;
		}
	</style>
	<body>
		<hr >
		<h3>省、市、县区三联动</h3>
		省：
		<select id="add_Pose" onchange="fun1()">
			<option value="p">选择省</option>
		</select>
		市：
		<select id="add_ciry" onchange="fun2()">
			<option value="c">选择市</option>
		</select>
		县区：
		<select id="add_region" onchange="fun3()"> 
			<option value="r">选择区县</option>
		</select>
		<br>
		地址：<span id="add_Text3">.......</span>
		<hr >
		<h3>五个GET接口</h3><div id="get1_text">123</div>
		<br>
		<button type="button" onclick="get1()">GET1</button>
		<button type="button" onclick="get2()">GET2</button>
		<button type="button" onclick="get3()">GET3</button>
		<button type="button" onclick="get4()">GET4</button>
		<button type="button" onclick="get5()">GET5</button>
		<hr >
		<h3>五个	POST接口</h3><div id="post1_text">123</div>
		<button type="button" onclick="pos1()">POS1</button>
		<button type="button" onclick="pos2()">POS2</button>
		<button type="button" onclick="pos3()">POS3</button>
		<button type="button" onclick="pos4()">POS4</button>
		<button type="button" onclick="pos5()">POS5</button>
		<hr >
	</body>
	<script type="text/javascript">
		//取得id值
		var getP=document.getElementById('add_Pose');
		var getC=document.getElementById('add_ciry');
		var getR=document.getElementById('add_region');
		var textAdress=document.getElementById('add_Text3');
		//创建数组 声、市、县区数组
		//#1：省
		var pArr=['福建省','浙江省','四川省'];
		//#1：市
		var cArr=[
			['宁德市','福鼎市','福州市'],
			['温州市','杭州市',],
			['成都市','重庆市']
		];
		//#1：区、县
		var rArr=[[
			['福安市','蕉城区','霞浦市'],
			['上白县','高尚村','姑姑村'],
		],[
			['仓山区','老药周街'],
			['江南区','笑死人区'],
		],[
			['西湖区','西湖二区'],
			['成都一区','成都二区'],
			['重庆一区','重庆二区']
		]];
		//省方法
		onload=function fun1_1(){
			for (var i = 0; i < pArr.length; i++) {
				getP.innerHTML+=`<option value="`+i+`">`+pArr[i]+`</option>`;
			}
		} 
		//市方法
		function fun1(){
			getC.innerHTML=`<option value="c">选择市</option>`;
			getR.innerHTML=`<option value="P">选择区县</option>`;
			textAdress.innerText=``;
			if (getP.value=='p') {
				alert('亲选择省份');
				textAdress.innerText=``;
			};
			var cityarr=cArr[getP.value];
			for (var i = 0; i <cityarr.length; i++) {
				getC.innerHTML+=`<option value="`+i+`">`+cityarr[i]+`</option>`;
			};
		};
		//区方法
		function fun2(){
			getR.innerHTML=`<option value="P">选择区县</option>`;
			 textAdress.innerText=``;
			if (getC.value=='c') {
				alert('请选择市');
			};
			var res=rArr[getP.value][getC.value];
			for (var i = 0; i <res.length; i++) {
				getR.innerHTML+=`<option value="`+i+`">`+res[i]+`</option>`;
			}
		};
		//将地址输入
		function fun3(){
		 textAdress.innerText=``+pArr[getP.value]+cArr[getP.value][getC.value]+rArr[getP.value][getC.value][getR.value]+``
		};
	</script>
	<!-- AJAX_POST_GET接口 -->
	
	<script type="text/javascript">
		var get1Text=document.getElementById('get1_text');
		var post1Text=document.getElementById('post1_text');
		var ajxa=new XMLHttpRequest();
		function get1(){

			ajxa.open('GET','https://www.fastmock.site/mock/d9b2e2a9d834f7203b9a2922619cf86a/mdjs/api/hello');
			ajxa.send();
			ajxa.onreadystatechange = function(){
				if(ajxa.readyState==4 && ajxa.status==200){
					var obj = JSON.parse(ajxa.responseText);
					get1_text.innerText = obj.result;
				};
			};			
		};
		function get2(){
			ajxa.open('GET','http://poetry.apiopen.top/getTime');
			ajxa.send();
			ajxa.onreadystatechange=function (){
				if(ajxa.readyState==4&&ajxa.status==200){
					var obj=JSON.parse(ajxa.responseText);
					 if (obj.code==200&&obj.message=="成功!") {
						console.log(obj);
						get1Text.innerText=obj.result.dateTime;
					}
				};
			};
		};
		function get3(){
			ajxa.open('GET','http://poetry.apiopen.top/sentences');
			ajxa.send();//发送
			ajxa.onreadystatechange=function(){
				if (ajxa.readyState==4&&ajxa.status==200) {
					var obj=JSON.parse(ajxa.responseText);
					if(obj.code==200&&obj.message=="成功!"){
						console.log(obj.result);
						get1Text.innerText=obj.result.name;
					}
				}
			};
		};
		function get4(){
			ajxa.open('GET','http://poetry.apiopen.top/poetryAuthor?count=2&page=1&name=李白');
			ajxa.send();
			ajxa.onreadystatechange=function(){
				if (ajxa.readyState==4&ajxa.status==200) {
					var obj=JSON.parse(ajxa.responseText);
					if (obj.code==200&&obj.message=="成功!") {
						console.log(obj);
						get1Text.innerText=obj.result.simpleIntro;
					}
				}
			}
		}
		function get5(){
			ajxa.open('GET','https://wis.qq.com/weather/common?source=xw&weather_type=forecast_1h|forecast_24h|index|alarm|limit|tips')
			ajxa.send(`province=四川&city=成都&county=武侯区)`)
			ajxa.onreadystatechange=function(){
				if(ajxa.status==200&&ajxa.readyState==4){
					var obj=JSON.parse(ajxa.responseText);
					console.log(obj);
					get1Text.innerText=obj.message;
				}
			}
		}
		function pos1(){

			//打开POST 接口
			ajxa.open('POST','https://api.apiopen.top/userFeedback');
			ajxa.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
			ajxa.send('apikey=9648872f9aa08da137ce45fe1dda8279&text=我觉得应该再增加个版本更新功能。&email=135@qq.com');
			// ajxa.send('');
			ajxa.onreadystatechange=function(){
			if (ajxa.readyState ==4 && ajxa.status==200)
			    {
			        var obj1=JSON.parse(ajxa.responseText);
					console.log(obj1);
					post1Text.innerText=obj1.message;
			    };
			};
		};
		function pos2(){
			ajxa.open('POST','https://api.apiopen.top/deleteFeedback')
			ajxa.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
			ajxa.send('apikey=9648872f9aa08da137ce45fe1dda8279&id=1')
			ajxa.onreadystatechange=function(){
				if (ajxa.readyState ==4 && ajxa.status==200)
				    {
				        var obj=JSON.parse(ajxa.responseText);
						console.log(obj);
						post1Text.innerText=obj.message;
				    };
				};
			}
		function pos3(){
			ajxa.open('POST','https://api.apiopen.top/developerUpdateKey');
			ajxa.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
			ajxa.send('name=peakchao&passwd=123456');
			ajxa.onreadystatechange=function(){
				if (ajxa.readyState ==4 && ajxa.status==200)
				    {
				        var obj=JSON.parse(ajxa.responseText);
						console.log(obj);
						post1Text.innerText=obj.result.apikey;
				    };
				};
			}
		function pos4(){
			ajxa.open('POST','https://api.apiopen.top/getTangPoetry')
			ajxa.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
			ajxa.send('page=1&count=5')
			ajxa.onreadystatechange=function(){
				if (ajxa.readyState ==4 && ajxa.status==200)
				    {
				        var obj=JSON.parse(ajxa.responseText);
						console.log(obj);
						post1Text.innerText=obj.result;
				    };
				};
			}
		function pos5(){
			ajxa.open('POST','https://api.apiopen.top/registerUser')
			ajxa.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
			ajxa.send('apikey=d0058f79caae5300dcba65f128e52855&name=peakchao&passwd=123456&nikeName=飞翔的水牛&headerImg=	https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_86d58ae1.png&phone=13888888888&email=12345@qq.com&vipGrade=6&autograph=没有个性，没有前面&remarks=这是与一个备注，啦啦啦啦~');
			ajxa.onreadystatechange=function(){
				if (ajxa.readyState ==4 && ajxa.status==200)
				    {
				        var obj=JSON.parse(ajxa.responseText);
						console.log(obj);
						post1Text.innerText=obj.message;
				    };
				};
			}
	</script>
</html>
